---
sidebar_position: 1
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';

# Quick Start

The fastest way to get you going.

## Install

<Tabs
  defaultValue="yarn"
  values={[
    {label: 'Yarn', value: 'yarn'},
    {label: 'NPM', value: 'npm'},
  ]}>
  <TabItem value="yarn">
    <CodeBlock className="language-shell">yarn add react-hotkeys-hook</CodeBlock>
  </TabItem>
  <TabItem value="npm">
    <CodeBlock className="language-shell">npm i react-hotkeys-hook --save</CodeBlock>
  </TabItem>
</Tabs>

> Note: React 16.8+ is required to use Hooks.

## Usage

```jsx
import { useHotkeys } from 'react-hotkeys-hook';
```

```jsx
function MyComponent() {
  const [count, setCount] = useState(0);

  useHotkeys('a', () => setCount(count => count + 1));

  return (
    <span>Pressed 'a' key {count} times.</span>
  );
}
```

:::note Out of the box support for TypeScript
`react-hotkeys-hook` is written in TypeScript, so we don't have to install any additional typings.
:::
